<template>
    <v-dialog v-model="editdialog" scrollable persistent max-width="85%" :fullscreen="$vuetify.breakpoint.xsOnly">
      <v-card>
        <v-card-title>
          <span class="headline">{{ name }}</span>
        </v-card-title>
        <v-divider></v-divider>
        <v-card-text>
          <v-container grid-list-md>
            <v-form v-model="valid"  ref="editprojectform">
              <v-layout wrap>
                <v-flex xs12 sm6 md2>
                  <v-text-field label="项目名称" v-model="fields.name" :error-messages="msg.name" :rules="nameRules"  required></v-text-field>
                </v-flex>
                <v-flex xs12 sm6 md2>
                  <v-text-field label="项目英文名" v-model="fields.name_en" :rules="name_enRules" :error-messages="msg.name_en" required></v-text-field>
                </v-flex>
                <v-flex xs12 sm6 md2>
                  <v-text-field label="域名" v-model="fields.url"></v-text-field>
                </v-flex>
                <v-flex xs12 sm6 md2>
                  <v-autocomplete :items="parent.items" v-model="fields.parent" item-text="text" item-value="value" label="父节点" autocomplete :clearable="true"></v-autocomplete>
                </v-flex>
                <v-flex xs12 sm6 md2>
                  <v-autocomplete :items="projectType.items" v-model="fields.projectType" item-text="text"
                                  item-value="value" :rules="projectTypeRules" label="项目类型" required></v-autocomplete>
                </v-flex>
                <v-flex xs12 sm6 md2>
                  <v-autocomplete :items="project_nature.items" v-model="fields.project_nature" item-text="text"
                                  item-value="value" label="项目属性"></v-autocomplete>
                </v-flex>
                <v-flex xs12 sm6 md2>
                  <v-autocomplete :items="status.items" v-model="fields.status" item-text="text"
                                  item-value="value" label="项目状态"></v-autocomplete>
                </v-flex>
                <v-flex xs12 sm6 md2>
                  <v-autocomplete :items="publish_type.items" v-model="fields.publish_type" item-text="text"
                                  item-value="value" label="发布类型"></v-autocomplete>
                </v-flex>
                <v-flex xs12 sm6 md2>
                  <v-autocomplete :items="owner.items" v-model="fields.owner" item-text="text" :rules="ownerRules"
                                  item-value="value" label="负责人" required autocomplete></v-autocomplete>
                </v-flex>
                <v-flex xs12 sm6 md2>
                  <v-autocomplete :items="env.items" v-model="fields.env" item-text="text"
                                  item-value="value" :rules="envRules" label="项目环境" required></v-autocomplete>
                </v-flex>
                <v-flex xs12 sm6 md2>
                  <v-text-field label="GIT地址" v-model="fields.git_path" :rules="gitPath" required></v-text-field>
                </v-flex>
                <v-flex xs12 sm6 md2>
                  <v-autocomplete :items="detection.items" v-model="fields.detection" item-text="text"
                                  item-value="value" label="检测方式" :rules="detectionRules" required></v-autocomplete>
                </v-flex>
                <v-flex xs12 sm6 md2>
                  <v-text-field label="检测端口|API(8080或:8080/info/)" v-model="fields.detection_method" :rules="detectionMethodRules" required></v-text-field>
                </v-flex>
                <v-flex xs12 sm6 md2>
                  <v-autocomplete :items="pub_version.items" v-model="fields.pub_version" item-text="text"
                                  item-value="value" label="发布版本" :rules="pubverRules" required></v-autocomplete>
                </v-flex>
                <v-flex xs12 sm6 md2>
                  <v-checkbox v-model="fields.file_replace" label="文件替换"></v-checkbox>
                </v-flex>
                <v-flex xs12 sm6 md2>
                  <v-autocomplete :items="build_param.items" v-model="fields.build_param" item-text="text"
                                  item-value="value" label="打包参数" :clearable="true" v-show="showBuildParam"></v-autocomplete>
                </v-flex>
                <v-flex xs12 sm12 md6>
                  <v-autocomplete :items="javaopt.items" v-model="fields.javaopt" v-show="showJavaopt" :rules="javaoptRules"
                                  item-text="text" item-value="value" label="虚拟机JAVA参数" required></v-autocomplete>
                </v-flex>
                <v-flex xs12 sm12 md6>
                  <v-autocomplete :items="pubcmd.items" v-model="fields.pubcmd" v-show="showPubcmd" :rules="pubcmdRules"
                                  item-text="text" item-value="value" label="虚拟机运行参数" required></v-autocomplete>
                </v-flex>
                <v-flex xs12 sm12 md6>
                  <v-autocomplete :items="dockeropt.items" v-model="fields.docker_opt" v-show="showDockeropt" :rules="dockeroptRules"
                                  item-text="text" item-value="value" label="容器JAVA参数" required></v-autocomplete>
                </v-flex>
                <v-flex xs12 sm12 md6>
                  <v-autocomplete :items="dockercmd.items" v-model="fields.docker_cmd" v-show="showDockercmd" :rules="dockercmdRules"
                                  item-text="text" item-value="value" label="容器运行参数" required></v-autocomplete>
                </v-flex>
                <v-flex xs12 sm12 md6>
                  <v-text-field label="相对路径" v-model="fields.relative_conf_path"
                                :rules="relative_conf_pathRules" v-show="showPath"  required></v-text-field>
                </v-flex>
                <v-flex xs12 sm12 md6>
                  <v-text-field label="绝对路径" v-model="fields.absolute_conf_path" :error-messages="msg.absolute_conf_path"
                                :rules="absolute_conf_pathRules" v-show="showPath"  required></v-text-field>
                </v-flex>
                <v-flex xs12 sm12 md6>
                  <v-autocomplete :items="service.items" v-model="fields.service" :clearable="true"
                                  multiple chips item-text="text" item-value="value" label="服务"></v-autocomplete>
                </v-flex>
                <v-flex xs12 sm12 md6>
                  <icon-item :field="fields.host" :items="host.items" :title="'主机'" @upSelect="getSelect"/>
                </v-flex>
                <v-flex xs12 sm12 md12>
                  <v-textarea label="备注" outline v-model="fields.describe"></v-textarea>
                </v-flex>
              </v-layout>
            </v-form>
          </v-container>
        </v-card-text>
        <v-divider></v-divider>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="primary" @click.native="closeEditProject()" small><h4>关闭</h4></v-btn>
          <v-btn color="warning" @click.native="editProject($refs.editprojectform)" small><h4>保存</h4></v-btn>
          <v-btn color="error" @click.native="deleteProject()" small><h4>删除</h4></v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
</template>

<script>
import { createNamespacedHelpers } from 'vuex'
const { mapActions } = createNamespacedHelpers('editproject')
export default {
  name: 'editproject',
  data: function () {
    return this.$store.state.editproject
  },
  methods: {
    ...mapActions({
      editProject: 'editProject',
      deleteProject: 'deleteProject',
      closeEditProject: 'closeEditProject',
      loadEditProject: 'loadEditProject',
      editWatchPublishType: 'editWatchPublishType',
      editWatchProjectEnv: 'editWatchProjectEnv',
      editPubVer: 'editPubVer'
    }),
    getSelect (data) {
      this.fields.host = data
    }
  },
  props: {
    editdialog: {
      type: Boolean,
      default: null
    },
    id: {
      type: Number,
      default: null
    }
  },
  watch: {
    editdialog () {
      this.$refs.editprojectform.reset()
      let msg = this.msg
      for (var i in msg) {
        msg[i] = ''
      }
      if (this.editdialog) {
        this.loadEditProject(this.id)
      } else {
        this.$store.dispatch('listproject/handlerProject')
        this.$store.dispatch('listproject/loadProjectFilters')
      }
    },
    'fields.publish_type': {
      handler: function () {
        if (this.fields.publish_type !== undefined) {
          this.editWatchPublishType(this.editdialog)
        }
      }
    },
    'fields.env': {
      handler: function () {
        if (this.fields.env) {
          this.editWatchProjectEnv(this.editdialog)
        }
      }
    },
    'fields.pub_version' () {
      this.editPubVer()
    },
    'fields.file_replace' () {
      if (this.fields.file_replace) {
        this.showPath = true
      } else {
        this.showPath = false
        this.fields.relative_conf_path = ''
        this.fields.absolute_conf_path = ''
      }
    }
  },
  components: {
    'icon-item': () => import('../../components/select/iconItem')
  }
}
</script>
